<template>
  <div>
    <el-header style="text-align: right; font-size: 12px">
    </el-header>
    <!-- 学生搜索 -->
    <div>
      <el-form ref="student" :model="student" label-width="80px" :inline="true">
        <el-form-item label="学生名称">
          <el-input v-model="student.sname"></el-input>
        </el-form-item>
        <el-form-item label="学生生日">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker v-model="student.sdate" type="datetime" format="yyyy-MM-dd" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 学生展示 -->
    <div>
      <el-main>
        <el-table :data="pageBean.data">
          <el-table-column prop="sid" label="id">
          </el-table-column>
          <el-table-column prop="sname" label="姓名">
          </el-table-column>
          <el-table-column prop="sdate" label="日期">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="primary" icon="el-icon-edit"
                @click="addStudent(scope.$index, scope.row)">添加</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </div>
  <!-- 分页 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageBean.pageIndex"
      :page-sizes="[100, 200, 300, 400]"
      :page-size=pageBean.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>


    <!-- 修改 -->
    <div>
      <!-- Form -->
      <el-dialog title="修改学生" :visible.sync="dialogFormVisible">
        <el-form :model="student">
          <el-form-item label="学生名称" :label-width="formLabelWidth">
            <el-input v-model="student.sname" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    // const item = {
    //   date: '2016-05-02',
    //   name: '王小虎',
    //   address: '上海市普陀区金沙江路 1518 弄'
    // };

    return {
      // tableData: Array(20).fill(item)
      student: {
        // sid:0,
        // sname: '',

      },
      students: [],
      pageIndex: 1,
      pageSize: 10,
      pageBean: {
        data: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalPage: 0
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      currentPage4: 4
    }
  },
  created() {
    // this.getAllStudent();
    this.getAllStudents();
  },
  methods: {
    getAllStudent() {
      this.$axios.get("http://localhost:8080/test").then(resp => {
        console.log(resp);
        this.students = resp.data;
      })
    },

    getAllStudents() {
      this.$axios.get("http://localhost:8080/getAllStudent", {
        params: { pageIndex: this.pageIndex, pageSize: this.pageSize, sid: this.student, sid: this.student.same, sdate: this.sdate }
      }).then(resp => {
        console.log(resp);
        this.pageBean = resp.data.data;
      })
    },
    onSubmit() {
      // json+路径
      console.log('submit!');
      console.log(this.student);
      this.$axios.post("http://localhost:8080/getAllStudents1", { "sid": "1" }
      ).then(resp => {
        console.log(resp);
        this.pageBean = resp.data.data;
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      addStudent(index, row) {
      console.log(index, row);
      this.$router.push("/studentAdd")
    }


  }
}
</script>